import React, { useEffect, useMemo, useState } from "react";
import { FolderOutlined, IeOutlined, SettingOutlined } from "@ant-design/icons";
import type { GetProp, MenuProps } from "antd";
import { Menu } from "antd";
import { useThemeConf } from "@/stores/themeConf";
import { useGlobalConf } from "@/stores/globalConf";
import { router } from "@/routes";
import { useLocation } from "react-router-dom";
import { getMenuList } from "@/interfaces";
import { MenuDataType } from "@/pages/menuManager";
import "./index.scss";

type MenuItem = GetProp<MenuProps, "items">[number] & {
  is_remote?: "true" | "false";
  is_folder?: "true" | "false";
  path?: string;
  children?: MenuItem[];
};

const items: MenuItem[] = [
  {
    key: "sub1",
    label: "Navigation One",
    icon: <SettingOutlined />,
    children: [
      { key: "/pageManager", label: "低代码页面管理" },
      { key: "/menuManager", label: "菜单管理" },
    ],
  },
];

const SideMenu: React.FC = () => {
  const { theme, themeState } = useThemeConf();
  const [current, setCurrent] = useState("/menuManager");
  const { menuCollapsed } = useGlobalConf();
  const [menuData, setMenuData] = useState<MenuDataType[]>([]);
  const location = useLocation();
  const onClick: MenuProps["onClick"] = ({ key }) => {
    setCurrent(key);
    const item = getMenuItem(renderMenuItem, key);
    if (item) {
      const { is_folder, is_remote, path } = item;
      if(is_folder === 'true')return
      
      const realPath = is_remote === "true" ? path : key;
      if(realPath){
        router.navigate(realPath)
      }
    }
  };
  useEffect(() => {
    getMenu();
  }, []);
  useEffect(() => {
    const pathname = location.pathname;
    if (pathname === "/") {
      router.navigate(current);
    }
    setCurrent(pathname);
  }, [location]);

  const renderMenuItem = useMemo(() => {
    if (menuData.length > 0) {
      function loopFn(item: MenuDataType): MenuItem {
        const { key, label, children, id, isFolder, path } = item;
        return {
          key: `${id}_${key}`,
          label,
          ...(children && { children: item.children?.map(loopFn) }),
          icon: isFolder ? <FolderOutlined /> : <IeOutlined />,
          is_remote: "true",
          is_folder: isFolder ? "true" : "false",
          path,
        };
      }
      const apiMenuItem = menuData.map(item => {
        return loopFn(item);
      });
      return [...items, ...apiMenuItem];
    } else {
      return [...items];
    }
  }, [menuData]);
  async function getMenu() {
    const res = await getMenuList(1, 1000);
    setMenuData(res.data.data ?? []);
  }
  function getMenuItem(arr: MenuItem[], key: string): MenuItem | null {
    for (let index = 0; index < arr.length; index++) {
      const element = arr[index];
      if (element.key === key) {
        return element;
      }
      if (Array.isArray(element?.children)) {
        const founder = getMenuItem(element.children, key);
        if (founder) return founder;
      }
    }
    return null;
  }

  return (
    <Menu
      theme={theme}
      onClick={onClick}
      // style={{ width: 200 }}
      defaultOpenKeys={["sub1"]}
      selectedKeys={[current]}
      mode="inline"
      items={renderMenuItem}
      inlineCollapsed={menuCollapsed}
      className="asideMenu"
    />
  );
};

export default SideMenu;
